<template>
  <div class="Tree">
    <el-tree show-checkbox 
             node-key="id"
             ref="tree"
             :data="treeData"  
             :props="defaultProps"
             @check="checkFun">
    </el-tree>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, PropSync, Ref } from "vue-property-decorator";
@Component
export default class Tree extends Vue {
  @Prop ({ default: true }) parent!: boolean // 是否选择的数据包含父节点
  @Prop ({ default: false }) half!: boolean // 时候把半选中节点返回
  @Prop({ default: () => { return [] }}) treeData!: any[]
  @PropSync ('selectList') shopList!: any[]
  @Ref() tree!: any
  defaultProps = {
    children: "children",
    label: "label",
  };
  mounted () {
    const ids = this.shopList.map(e => e.id)
    this.tree && this.tree.setCheckedKeys(ids)
  }
  checkFun (current, data) {
    const selectData = this.setSelectData(data)
    this.shopList = selectData
  }
  setSelectData (data) {
    const { checkedNodes, halfCheckedNodes } = data
    const parent = this.parent
    const half = this.half
    if(!parent) {
      return checkedNodes.filter(d => !d.children)
    }else {
      return half ? checkedNodes.concat(halfCheckedNodes) : checkedNodes
    }
  }
}
</script>

<style lang="scss" scoped>
.Tree {
}
</style>